import { Input } from 'antd';
import { connect } from 'dva';
import EventList from '../components/eventList/EventList';

const Search = Input.Search;

// state 都交给 model 来管理了，所以这里改成无状态、纯净的 函数式组件
const UserInput = ({ list, dispatch }) => {
    const width = { width: '45%' };
    return (
        <div style={ width }>
            <h3>输入待办事项</h3>
            <Search placeholder="文字内容" enterButton="添加"
                onSearch={ (value) => dispatch({
                        type: 'todolist/add',
                        payload: { value }
                    })
                }
            />
            <EventList list={ list } dispatch={ dispatch } />
        </div>
    );
}

function mapStateToProps(state) {
    return { list: state.todolist };
  }
export default connect(mapStateToProps)(UserInput);